<template>
  <div 
    :style="{ backgroundImage:`url(${SVG_loginbg})` }"
    class="h-screen w-screen flex mybg ">
    <div class=" sm:flex hidden w-0 flex-1 text-white flex-col pl-12 justify-center">
      <img class=" w-44" :src="SVG_student" alt="">
      <p class=" mt-4 text-3xl">智能安检核查平台</p>
      <p class=" mt-2 font-normal text-white text-md dark:text-gray-500 -enter-x">
        石家庄学院 - 软件工程1班 [XM]
      </p>
    </div>

    <div class=" w-0 flex-1 p-8 flex items-center justify-center flex-col">
      <p class="select-none flex tracking-widest text-3xl text-shadow text-black text-opacity-60">
        用户登录
      </p>
      <div 
        class="flex  max-w-8/10 flex-col my-8 relative items-center justify-center">
        <input
          class=" outline-none max-w-full h-12 w-96 pl-3"
          v-model="uinfo.username"
					type="text"
					placeholder="账号"
        >
				<input
				  class=" outline-none max-w-full mt-2 mb-5 h-12 w-96 pl-3"
          type="password"
				  v-model="uinfo.password"
					placeholder="密码"
				>
        <el-button
          type="info"
          text
          bg
          size="large"
          class=" w-full max-w-full"
          @click="doLogin"
          >登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onBeforeMount } from "vue"
import { useRouter } from "vue-router"
import { useStore } from "vuex"
import SVG_loginbg from 'svgs/loginbg.svg'
import SVG_student from 'svgs/student.svg'
import { ElMessage } from "element-plus"

const router = useRouter()
const store = useStore()

const uinfo = reactive({
  username:'',
  password:''
})

const doLogin = async () => {
  if(!uinfo.username || !uinfo.password)
    return ElMessage.error('请输入账号 / 密码')
  await store.dispatch('logIn',uinfo)
  router.push({name:'home'})
}

</script>

<style scoped lang="scss">
.mybg{
  background-position: calc(100% - 100vw);
  background-repeat: no-repeat;
  background-color: rgba(35,72,175,0.15);
  background-size: auto 100%;
  transition: all .3s;
}

.text-shadow{
  text-shadow:2px 2px 4px rgba(0, 0, 0, .2);
}

@media (min-width: 640px) {
  .mybg{
    background-position: calc(100% - 50vw);
  }
}
</style>

